<template>
    <view class="calendar">
      <!-- 日期头部 -->
      <view class="header">
        <view>{{ year }}年{{ month }}月</view>
        <view class="tool-btn">
          <view @click="prevMonth" class="arrow">&lt;</view>
          <view @click="nextMonth" class="arrow">&gt;</view>
        </view>
      </view>
  
      <!-- 星期标题 -->
      <view class="weekdays">
        <text v-for="(day, index) in weekdays" :key="index" class="weekday">{{ day }}</text>
      </view>
  
      <!-- 日期 -->
      <view class="dates">
        <view
          v-for="(day, index) in dates"
          :key="index"
          @tap="selectDate(day)"
          :class="[
            'date', 
            { 
              today: isToday(day), 
              currentMonth: day.isCurrentMonth,
              selected: isSelected(day),
              disabled: isDisabled(day) // 新增禁用状态
            }
          ]"
        >
          {{ day.dateNum }}
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      disabledDate: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        currentDate: new Date(), // 当前选中的日期
        year: 0, // 当前年份
        month: 0, // 当前月份
        dates: [], // 用于渲染的日期列表
        weekdays: ["日", "一", "二", "三", "四", "五", "六"], // 星期标题
        selectedDate: {}, // 新增选中日期状态
      };
    },
    mounted() {
      this.initCalendar();
    },
    methods: {
      // 选中逻辑
      selectDate(day) {
        // if( new Date(day.date).getDate() == 30) {
          console.log('selected day is Disable?' , this.isDisabled(day))
        // }
        if (this.isDisabled(day)) return;
        // 处理跨月点击
        if (!day.isCurrentMonth) {
          this.year = day.year; // 更新年份
          this.month = day.month; // 更新月份
          this.generateCalendar();
        }
        this.selectedDate = {
          year: this.year,
          month: this.month,
          dateNum: day.dateNum
        };
      },
      
      // 添加选中判断方法
      isSelected(day) {
        if (!this.selectedDate || !day.isCurrentMonth) return false;
        return (
          day.dateNum === this.selectedDate.dateNum &&
          this.month === this.selectedDate.month &&
          this.year === this.selectedDate.year
        );
      },
      initCalendar() {
        const current = this.currentDate;
        this.year = current.getFullYear();
        this.month = current.getMonth() + 1;
        this.generateCalendar();
      },
      generateCalendar() {
        const current = new Date(this.year, this.month - 1);
        // 获取当前月份的第一天是星期几
        const firstDayOfWeek = new Date(this.year, this.month - 1, 1).getDay();
        // 获取当前月份的最后一天是几号
        const lastDateOfMonth = new Date(this.year, this.month, 0).getDate();
        // 上个月的最后一天
        const lastMonthLastDate = new Date(this.year, this.month - 1, 0).getDate();
        const dates = [];
  
        // 填充上个月的日期
        for (let i = firstDayOfWeek - 1; i >= 0; i--) {
          const year = this.month == 1 ?  this.year - 1 :  this.year
          const month = this.month == 1 ?  12 :  this.month - 1
          const dateNum = lastMonthLastDate - i;
          dates.push({
            dateNum,
            year,
            month,
            date: new Date(`${year}-${month}-${dateNum}`),
            isCurrentMonth: false,
            isPrevMonth: true,
          });
        }
  
        // 本月的日期
        for (let i = 1; i <= lastDateOfMonth; i++) {
          const year = this.year
          const month = this.month
          dates.push({
            dateNum: i,
            year,
            month,
            date: new Date(`${year}-${month}-${i}`),
            isCurrentMonth: true,
          });
        }
  
        // 下个月的日期
        const remainingDays = 42 - dates.length; // 确保有6行，每行7天总共42格
        for (let i = 1; i <= remainingDays; i++) {
          const year = this.month == 12 ? this.year + 1 :  this.year
          const month = this.month == 12 ?  1 :  this.month + 1
          dates.push({
            dateNum: i,
            year,
            month,
            date: new Date(`${year}-${month}-${i}`),
            isCurrentMonth: false,
            isNextMonth: true,
          });
        }
  
        this.dates = dates;
      },
      isToday(day) {
        if (!day.isCurrentMonth) return false; // 排除非当前月份的日期
        const today = new Date();
        return (
          day.dateNum === today.getDate() &&
          this.month === today.getMonth() + 1 &&
          this.year === today.getFullYear()
        );
      },
      prevMonth() {
        if (this.month === 1) {
          this.month = 12;
          this.year -= 1;
        } else {
          this.month -= 1;
        }
        this.generateCalendar();
      },
      nextMonth() {
        if (this.month === 12) {
          this.month = 1;
          this.year += 1;
        } else {
          this.month += 1;
        }
        this.generateCalendar();
      },
      // 新增禁用判断方法
      isDisabled(day) {
        return this.disabledDate && this.disabledDate(day.date);
      },
    },
  };
  </script>
  
  <style>
  .calendar {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f5f5f5;
    font-weight: bold;
  }
  .tool-btn {
    display: flex;
    justify-content: space-between;
    width: 100rpx;

  }
  .arrow {
    cursor: pointer;
  }
  
  .weekdays,
  .dates {
    display: flex;
    flex-wrap: wrap;
  }
  
  .weekday,
  .date {
    width: 14.285%; /* 一周七天 */
    text-align: center;
    padding: 8px 0;
    box-sizing: border-box;
  }
  
  .date {
    position: relative;
  }
  
  .date.currentMonth {
    color: #000;
  }
  .date.today {
    color: #007aff;
    font-weight: bold;
  }
  .date.selected {
    background: #007aff;
    color: #fff;
    font-weight: bold;
  }
  .date:not(.currentMonth) {
    color: #ccc;
  }
  .date.disabled {
    color: #ccc !important;
    pointer-events: none;
  }
  </style>